<div class="coreWikiHelp">
<h1>Colour Examples</h1>
<p>Some color definitions above and beyond what's standard in <span class='wikiword'>PmWiki</span>:
</p>
<div class='vspace'></div><table class='markup vert' align='center'>
      <tr><td class='markup1' valign='top'><pre>%color=#0000cc define=hdblue%
%color=#006600 define=dkgreen%
%color=#009999 define=bluegrass%
%color=#33ffcc define=teal%
%color=#660066 define=dkpurple%
%color=#6600cc define=perwi%
%color=#666666 define=dkgrey%
%color=#669966 define=mistgreen%
%color=#669999 define=slategr%
%color=#990099 define=purple%
%color=#9966cc define=ltpurple%
%color=#999999 define=ltgrey%
%color=#99ccff define=ltblue%
%color=#99ff33 define=springgreen%
%color=#cc33cc define=magenta%
%color=#cc6633 define=btorange%
%color=#cccccc define=grey%
%color=#ccffcc define=ltgreen%
%color=#ff3399 define=pink%
%color=#ff6666 define=ltred%
%color=#ff9900 define=orange%
%color=#ff9966 define=ltorange%
%color=#ffbb66 define=gold%
%color=#ffff00 define=yellow%
</pre></td></tr><tr><td 
        class='markup2' valign='top'><p>
</p>
</td></tr></table>
<div class='vspace'></div>
<table border='1' width='100%' ><tr ><th  align='left'>Item</th><th  align='left'>Markup</th><th  align='left'>Text</th></tr>
<tr ><td  align='left'>Red</td><td  align='left'>%red%RED%%</td><td  align='left'><span  style='color: red;'>RED</span></td></tr>
<tr ><td  align='left'>Light Red</td><td  align='left'>%ltred%Light Red%%</td><td  align='left'><span  style='color: #ff6666;'>Light Red</span></td></tr>
<tr ><td  align='left'>Pink</td><td  align='left'>%pink%Pink%%</td><td  align='left'><span  style='color: #ff3399;'>Pink</span></td></tr>
<tr ><td  align='left'>Blue</td><td  align='left'>%blue%Blue%%</td><td  align='left'><span  style='color: blue;'>Blue</span></td></tr>
<tr ><td  align='left'>Light Blue</td><td  align='left'>%ltblue%Light Blue%%</td><td  align='left'><span  style='color: #99ccff;'>Light Blue</span></td></tr>
<tr ><td  align='left'>BlueGrass</td><td  align='left'>%bluegrass%Bluegrass%%</td><td  align='left'><span  style='color: #009999;'>Bluegrass</span></td></tr>
<tr ><td  align='left'>Hard Blue</td><td  align='left'>%hdblue%Hard Blue%%</td><td  align='left'><span  style='color: #0000cc;'>Hard Blue</span></td></tr>
<tr ><td  align='left'>Navy</td><td  align='left'>%navy%Navy%%</td><td  align='left'><span  style='color: navy;'>Navy</span></td></tr>
<tr ><td  align='left'>Teal</td><td  align='left'>%teal%Teal%%</td><td  align='left'><span  style='color: #33ffcc;'>Teal</span></td></tr>
<tr ><td  align='left'>Green</td><td  align='left'>%green%Green%%</td><td  align='left'><span  style='color: green;'>Green</span></td></tr>
<tr ><td  align='left'>Light Green</td><td  align='left'>%ltgreen%Light Green%%</td><td  align='left'><span  style='color: #ccffcc;'>Light Green</span></td></tr>
<tr ><td  align='left'>Spring Green</td><td  align='left'>%springgreen%Spring Green%%</td><td  align='left'><span  style='color: #99ff33;'>Spring Green</span></td></tr>
<tr ><td  align='left'>Mist Green</td><td  align='left'>%mistgreen%Mist Green%%</td><td  align='left'><span  style='color: #669966;'>Mist Green</span></td></tr>
<tr ><td  align='left'>Dark Green</td><td  align='left'>%dkgreen%Dark Green%%</td><td  align='left'><span  style='color: #006600;'>Dark Green</span></td></tr>
<tr ><td  align='left'>Slate Green</td><td  align='left'>%slategr%Slate Green%%</td><td  align='left'><span  style='color: #669999;'>Slate Green</span></td></tr>
<tr ><td  align='left'>Purple</td><td  align='left'>%purple%Purple%%</td><td  align='left'><span  style='color: #990099;'>Purple</span></td></tr>
<tr ><td  align='left'>Light Purple</td><td  align='left'>%ltpurple%Light Purple%%</td><td  align='left'><span  style='color: #9966cc;'>Light Purple</span></td></tr>
<tr ><td  align='left'>Dark Purple</td><td  align='left'>%dkpurple%Dark Purple%%</td><td  align='left'><span  style='color: #660066;'>Dark Purple</span></td></tr>
<tr ><td  align='left'>Perriwinkle</td><td  align='left'>%perwi%Perwi%%</td><td  align='left'><span  style='color: #6600cc;'>Perwi</span></td></tr>
<tr ><td  align='left'>Magenta</td><td  align='left'>%magenta%Magenta%%</td><td  align='left'><span  style='color: #cc33cc;'>Magenta</span></td></tr>
<tr ><td  align='left'>Yellow</td><td  align='left'>%yellow%Yellow%%</td><td  align='left'><span  style='color: #ffff00;'>Yellow</span></td></tr>
<tr ><td  align='left'>Gold</td><td  align='left'>%gold%Gold%%</td><td  align='left'><span  style='color: #ffbb66;'>Gold</span></td></tr>
<tr ><td  align='left'>Orange</td><td  align='left'>%orange%Orange%%</td><td  align='left'><span  style='color: #ff9900;'>Orange</span></td></tr>
<tr ><td  align='left'>Burnt Orange</td><td  align='left'>%btorange%Burnt Orange%%</td><td  align='left'><span  style='color: #cc6633;'>Burnt Orange</span></td></tr>
<tr ><td  align='left'>Light Orange</td><td  align='left'>%ltorange%Light Orange%%</td><td  align='left'><span  style='color: #ff9966;'>Light Orange</span></td></tr>
<tr ><td  align='left'>Maroon</td><td  align='left'>%maroon%Maroon%%</td><td  align='left'><span  style='color: maroon;'>Maroon</span></td></tr>
<tr ><td  align='left'>Grey</td><td  align='left'>%grey%Grey%%</td><td  align='left'><span  style='color: #cccccc;'>Grey</span></td></tr>
<tr ><td  align='left'>Dark Grey</td><td  align='left'>%dkgrey%Dark Grey%%</td><td  align='left'><span  style='color: #666666;'>Dark Grey</span></td></tr>
<tr ><td  align='left'>Light Grey</td><td  align='left'>%ltgrey%Light Grey%%</td><td  align='left'><span  style='color: #999999;'>Light Grey</span></td></tr>
</table>
<div class='vspace'></div><h2>Hints and Tips: </h2>
<ul><li>You need not "define" the hexadecimal colors in order to use them; it works just as well to set %color=#cc33cc% <span  style='color: #cc33cc;'>before some text</span> as to "define" it and use the definition.  The definition is convenient if you're going to use the color more than once.
</li><li>Use lowercase characters - prevents color numbers being mis-read as Wiki text.
</li><li>Remember that there is a slight difference between the way colour is rendered on Windows and Mac. - <span  style='color: green;'>note: What does this mean?</span>
</li><li>Text color always looks brighter than background color, because the white background dominates the overall brightness. IOW text colors should be darker than background colors to achieve the same impression of brightness (unless, of course, your wiki has a reverse video color scheme).
</li><li>Too many colours on the same page is distracting. Use them sparingly.
</li><li>You can hide text by making it white-on-white. It's a poor obfuscation technique though: the HTML source code will give it away, and if a savvy visitor marks the text, he'll see it anyway. Still, some single-author sites use it for making the Edit link unobtrusive.
</li></ul><div class='vspace'></div><h2>More Colours Options <small>(external links open in new windows)</small></h2>
<ul><li><a target='_blank'  class='urllink' href='http://www.mandarindesign.com/colorwheel.html' rel='nofollow'>4096 Color Wheel</a> at Mandarin Design
</li><li>Websafe Color Chart<a target='_blank'  class='apprlink' 
  href='http://www.pmwiki.org/wiki/PmWiki/WikiStyleColors?action=approvesites'>(approve links)</a> at Mandarin Design
</li><li><a target='_blank'  class='urllink' href='http://www.w3schools.com/html/html_colors.asp' rel='nofollow'>http://www.w3schools.com/html/html_colors.asp</a>
</li><li><a target='_blank'  class='urllink' href='http://www.nattyware.com/pixie.html' rel='nofollow'>Pixie download site</a> - install and run this tiny Windows utility, and "simply point to a colour and it will tell you the hex, RGB, HTML, CMYK and HSV values of that colour." (on Macintosh just open TextEdit and use shift+command+c)
</li></ul>
</div>
